<template>
<div>
    <!-- v-model进行数据的双向绑定 -->
    <input type="text" v-model.number="count"/>
    <p>{{count}}乘以2的值为：{{plus}}</p>
    <p>{{count}}乘以2的值为：{{plus}}</p>
    <p>{{count}}乘以2的值为：{{plus}}</p>
</div>
</template>

<script>
export default{
    name:'MyCounter',
    data() {
        return {
            count:1,
        }
    },
    computed:{
        // 计算属性的计算结果会被缓存，性能较好
        plus(){
            console.log('计算属性被执行了');
            // this代表这个vue实例对象
            return this.count*2;
        },
    },
    // methods: {
    //     plus(){
    //         // 方法的计算结果无法被缓存，性能低
    //         console.log("方法被执行了")
    //         return this.count*2;
    //     }
    // },
}
</script>

<style></style>